<template>
  <!-- 对话框 -->
  <Modal ref="modalRef" @register="modalForm" @confirm="okModal">
    <template #default>
      <Form @register="dataForm" />
    </template>
  </Modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Modal, useModal } from '@/design/components/Modal';
  import { Form, useForm, FormSchema } from '@/design/components/Form/index';
  import { ElMessage } from 'element-plus';

  // 组件属性
  const props = defineProps({
    title: {
      type: String,
      default: '添加用户',
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  });

  // 获取表单标题
  const title = ref(props.title);

  // 表单项
  const schemas: FormSchema[] = [
    {
      field: 'username',
      component: 'Input',
      label: '角色名称',
      componentProps: {
        placeholder: '请输入角色名称',
      },
      rules: [{ required: true, message: '请输入角色名称', trigger: ['blur'] }],
    },
    {
      field: 'mobile',
      component: 'Input',
      label: '手机号',
      componentProps: {
        placeholder: '请输入手机号码',
        controls: false,
      },
      rules: [{ required: true, message: '请输入手机号码', trigger: ['blur'] }],
    },
    {
      field: 'email',
      component: 'Input',
      label: '邮箱',
      componentProps: {
        placeholder: '请输入邮箱',
      },
      rules: [{ required: true, type: 'email', message: '请输入邮箱', trigger: ['change'] }],
    },
    {
      field: 'gender',
      component: 'Select',
      label: '性别',
      componentProps: {
        placeholder: '请选择性别',
        options: [
          {
            label: '男',
            value: 1,
          },
          {
            label: '女',
            value: 2,
          },
        ],
      },
    },

    {
      field: 'status',
      component: 'Select',
      label: '状态',
      componentProps: {
        placeholder: '请选择角色',
        options: [
          {
            label: '正常',
            value: 'normal',
          },
          {
            label: '禁用',
            value: 'disable',
          },
        ],
      },
    },
    {
      field: 'role',
      component: 'Select',
      label: '角色',
      componentProps: {
        placeholder: '请选择角色',
        options: [
          {
            label: '普通用户',
            value: 1,
          },
          {
            label: '推广管理员',
            value: 2,
          },
          {
            label: '发货管理员',
            value: 3,
          },
          {
            label: '财务管理员',
            value: 4,
          },
        ],
      },
    },
    {
      field: 'account',
      component: 'Input',
      label: '登录账号',
      componentProps: {
        placeholder: '请输入登录账号',
      },
    },
    {
      field: 'introduce',
      component: 'Input',
      label: '个人介绍',
      componentProps: {
        type: 'textarea',
        placeholder: '请输入登录账号',
      },
    },
  ];

  // 设置弹窗
  const [modalForm, { openModal, closeModal, setSubLoading, setProps }] = useModal({
    title,
    width: 650,
  });

  // 设置表单
  const [dataForm, { submit, setFieldsValue, getFieldsValue }] = useForm({
    layout: 'Horizontal',
    colProps: { span: 24 },
    labelWidth: 80, // label 宽度
    schemas,
  });

  //提交
  async function okModal() {
    const formRes = await submit();
    if (formRes) {
      const { isEdit } = props;
      console.log('表单值：', getFieldsValue());
      ElMessage.success(isEdit ? '修改成功' : '添加成功');
      setSubLoading(false);
      closeModal();
    } else {
      ElMessage.error('验证失败，请填写完整信息');
      setSubLoading(false);
    }
  }

  //导出方法
  defineExpose({
    openModal,
    closeModal,
    setFieldsValue,
    setProps,
  });
</script>
